<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2019/4/23
  Time: 11:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <meta property="lang" content="zh_CN">
    <title>言曌博客 | 附件管理</title>
    <link rel="shortcut icon" type="images/x-icon" href="/upload/2018/10/logo20181111185335360.png">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link rel="stylesheet" href="css/pace.min.css">
    <link rel="stylesheet" href="css/adminlte.min.css">
    <link rel="stylesheet" href="css/_all-skins.min.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/loader.css">
    <link rel="stylesheet" href="css/jquery.toast.min.css">
    <link rel="stylesheet" href="css/fileinput.min.css">
    <link rel="stylesheet" href="css/owo.min.css">
    <link rel="stylesheet" href="css/pretty-checkbox.min.css">
    <!--[if lt IE 9]>
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/owo.min.js"></script>
</head>
<body class="hold-transition sidebar-mini fixed skin-blue ">
<div class="wrapper">
    <!-- 顶部栏模块 -->
    <header class="main-header">
        <a href="/admin" class="logo">
            <span class="logo-mini"><b>S</b>S</span>
            <span class="logo-lg"><b>SE</b>NS</span>
        </a>
        <nav class="navbar navbar-static-top" role="navigation">
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <li><a href="/" title="跳转到前台" target="_blank"><i class="fa fa-location-arrow"></i></a></li>
                    <li class="dropdown messages-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-bell-o"></i>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="header">
                                你有 0 条新评论
                            </li>
                            <li>
                                <ul class="menu">
                                </ul>
                            </li>
                            <li class="footer"><a href="/admin/comment?status=1">查看所有评论</a></li>
                        </ul>
                    </li>
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="picture/1927d92e4aa543c8a2c764b6d096c335.gif" class="user-image" alt="User Image">
                            <span class="hidden-xs">xhz199838</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="user-header">
                                <img src="picture/1927d92e4aa543c8a2c764b6d096c335.gif" class="img-circle"
                                     alt="User Image">
                                <p>xhz199838</p>
                            </li>
                            <li class="user-footer">
                                <div class="pull-left"><a data-pjax="true" href="/admin/user/profile"
                                                          class="btn btn-default "><i class="fa fa-user"></i>个人资料</a>
                                </div>
                                <div class="pull-right"><a href="/admin/logOut" class="btn btn-default "><i
                                        class="fa fa-sign-out"></i>退出登录</a></div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <!-- 菜单栏模块 -->
    <aside class="main-sidebar">
        <section class="sidebar">
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="picture/1927d92e4aa543c8a2c764b6d096c335.gif" class="img-circle"
                         style="width: 45px;height: 45px;" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>xhz199838</p>
                    <a href="/admin/user/profile"><i
                            class="fa fa-circle text-success"></i>个人资料</a>
                </div>
            </div>
            <form action="/search" method="get" target="_blank" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="keyword" class="form-control" placeholder="Search...">
                    <span class="input-group-btn">
<button type="submit" name="keyword" id="search-btn" target="_blank" class="btn btn-flat">
<i class="fa fa-search"></i>
</button>
</span>
                </div>
            </form>
            <ul class="sidebar-menu tree" data-widget="tree">
                <li class="header">HEADER</li>
                <li class="active"><a data-pjax="true" href="index.jsp"> <i class="fa fa-dashboard"></i> <span>仪表盘</span>
                </a></li>
                <li class="treeview"><a data-pjax="true" href="#"> <i class="fa fa-book"></i> <span>文章</span> <span
                        class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span> </a>
                    <ul class="treeview-menu">
                        <li><a data-pjax="true" href="post.jsp"> <i class="fa fa-circle-o"></i>所有文章 </a></li>
                        <li><a data-pjax="true" href="postnew.jsp"> <i class="fa fa-circle-o"></i>写文章 </a></li>
                        <li><a data-pjax="true" href="category.jsp"> <i class="fa fa-circle-o"></i>分类目录 </a></li>
                        <li><a data-pjax="true" href="tag.jsp"> <i class="fa fa-circle-o"></i>标签 </a></li>
                    </ul>
                </li>
                <li><a data-pjax="true" href="attachment.jsp"> <i class="fa fa-picture-o"></i> <span>附件</span> </a>
                </li>
                <li><a data-pjax="true" href="comment.jsp"> <i class="fa fa-comment"></i> <span>评论</span> </a></li>
                <li class="treeview"><a data-pjax="true" href="#"> <i class="fa fa-user-o"></i> <span>用户</span> <span
                        class="pull-right-container"><i class="fa fa-angle-left pull-right"></i></span> </a>
                    <ul class="treeview-menu">
                        <li><a data-pjax="true" href="userprofile.jsp"> <i class="fa fa-circle-o"></i>个人资料 </a></li>
                    </ul>
                </li>
            </ul>
        </section>
    </aside>
    <div class="content-wrapper">
        <style type="text/css" rel="stylesheet">
            #showForm {
                margin-left: 4px;
                padding: 3px 6px;
                position: relative;
                top: -4px;
                border: 1px solid #ccc;
                border-radius: 2px;
                background: #fff;
                text-shadow: none;
                font-weight: 600;
                font-size: 12px;
                line-height: normal;
                color: #3c8dbc;
                cursor: pointer;
                transition: all .2s ease-in-out
            }

            #showForm:hover {
                background: #3c8dbc;
                color: #fff
            }

            .div-thumbnail {
                transition: all .5s ease-in-out;
                padding: 10px
            }

            .thumbnail {
                margin-bottom: 0
            }
        </style>
        <section class="content-header">
            <h1 style="display: inline-block;">附件管理</h1>
            <a id="showForm" href="#">
                <i class="fa fa-cloud-upload"
                   aria-hidden="true"></i>上传
            </a>
            <ol class="breadcrumb">
                <li><a data-pjax="true" href="/admin"><i
                        class="fa fa-dashboard"></i> 首页</a></li>
                <li class="active">附件管理</li>
            </ol>
        </section>
        <section class="content container-fluid">
            <div class="row" id="uploadForm" style="display: none;">
                <div class="col-md-12">
                    <div class="form-group">
                        <div class="file-loading">
                            <input id="uploadImg" class="file-loading" type="file" multiple name="file">
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-4 col-sm-6 col-xs-6 pull-right">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control input-group-lg" id="keywords" name="keywords"
                                   value="" placeholder="搜索附件文件">
                        </div>
                    </form>
                </div>
                <div class="clear"></div>
                <div id="attachment-box">
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(217)">
                        <a href="#" class="thumbnail">
                            <img src="picture/f357de3423dd44098635c625aac38131.gif" class="img-responsive"
                                 title="hd_1.jpg">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(216)">
                        <a href="#" class="thumbnail">
                            <img src="picture/980844abe9344ec1ab2f0f9cecf079ef.gif" class="img-responsive"
                                 title="wechat.jpg">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(215)">
                        <a href="#" class="thumbnail">
                            <img src="picture/5af6738a3cb24d31a95d492e178fd4c3.gif" class="img-responsive"
                                 title="i_5.jpg">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(212)">
                        <a href="#" class="thumbnail">
                            <img src="picture/b5f24414c4ee43328c0f949ed56df01c.gif" class="img-responsive"
                                 title="fbc0c53d55fe4e28a8faa0e3c5fc2616.gif">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(211)">
                        <a href="#" class="thumbnail">
                            <img src="picture/b5f24414c4ee43328c0f949ed56df01c.gif" class="img-responsive"
                                 title="fbc0c53d55fe4e28a8faa0e3c5fc2616.gif">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(210)">
                        <a href="#" class="thumbnail">
                            <img src="picture/b5f24414c4ee43328c0f949ed56df01c.gif" class="img-responsive"
                                 title="fbc0c53d55fe4e28a8faa0e3c5fc2616.gif">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(209)">
                        <a href="#" class="thumbnail">
                            <img src="picture/b5f24414c4ee43328c0f949ed56df01c.gif" class="img-responsive"
                                 title="fbc0c53d55fe4e28a8faa0e3c5fc2616.gif">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(202)">
                        <a href="#" class="thumbnail">
                            <img src="picture/dbfd72a5548e4ac5a53ec68b3544d923.gif" class="img-responsive"
                                 title="1.png">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(199)">
                        <a href="#" class="thumbnail">
                            <img src="picture/096c39ff031043a4a78d976274d33cd2.gif" class="img-responsive"
                                 title="-666193484.jpg">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(195)">
                        <a href="#" class="thumbnail">
                            <img src="picture/243a5261be3743a98f40b74d7b200a60.gif" class="img-responsive"
                                 title="test1.jpg">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(194)">
                        <a href="#" class="thumbnail">
                            <img src="picture/243a5261be3743a98f40b74d7b200a60.gif" class="img-responsive"
                                 title="test1.jpg">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(193)">
                        <a href="#" class="thumbnail">
                            <img src="picture/39572eba52634330a45f7882e986f5d1.gif" class="img-responsive"
                                 title="slide4.jpeg">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(191)">
                        <a href="#" class="thumbnail">
                            <img src="picture/a1b557b9e3ba4c0185869d497be51815.gif" class="img-responsive"
                                 title="slide-1.jpg">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(187)">
                        <a href="#" class="thumbnail">
                            <img src="picture/ad058faca32f4056838de823ac8aefc4.gif" class="img-responsive"
                                 title="IMG_4273.JPG">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(186)">
                        <a href="#" class="thumbnail">
                            <img src="picture/43a70092932f45e490e15f4ddfa07f6a.gif" class="img-responsive"
                                 title="IMG_4277.JPG">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(185)">
                        <a href="#" class="thumbnail">
                            <img src="picture/119c6d7b669f4fb2b7a3704d773dc41d.gif" class="img-responsive"
                                 title="IMG_4282.JPG">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(184)">
                        <a href="#" class="thumbnail">
                            <img src="picture/02f56c01493a49c88faac2fce4faebb8.gif" class="img-responsive"
                                 title="collections.png">
                        </a>
                    </div>
                    <div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"
                         onclick="openDetail(181)">
                        <a href="#" class="thumbnail">
                            <img src="picture/47a18f2b5bde47679987963c141a2d0d.gif" class="img-responsive"
                                 title="1.png">
                        </a>
                    </div>
                </div>
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <div class="no-margin pull-left">
                        第 <span id="pageNum">1</span>
                        /4页
                    </div>
                </div>
            </div>
        </section>
        <script type="application/javascript">
            function openDetail(id) {
                layer.open({
                    type: 2,
                    title: '附件详情',
                    shadeClose: true,
                    shade: 0.5,
                    maxmin: true,
                    area: ['90%', '90%'],
                    content: '/admin/attachment/detail?attachId=' + id,
                    scrollbar: false
                });
            }

            function loadFileInput() {
                $('#uploadImg').fileinput({
                    language: 'zh',
                    uploadUrl: '/admin/attachment/upload',
                    uploadAsync: true,
// allowedFileExtensions: ['jpg','gif','png','jpeg','svg','psd'],
                    maxFileCount: 100,
                    enctype: 'multipart/form-data',
                    showClose: false
                }).on("fileuploaded", function (event, data, previewId, index) {
                    var data = data.jqXHR.responseJSON;
                    if (data.success == "1") {
                        $("#uploadForm").hide(400);
                        $.toast({
                            text: data.Allmessage,
                            heading: '提示',
                            icon: 'success',
                            showHideTransition: 'fade',
                            allowToastClose: true,
                            hideAfter: 1000,
                            stack: 1,
                            position: 'top-center',
                            textAlign: 'left',
                            loader: true,
                            loaderBg: '#ffffff',
                            afterHidden: function () {
                                window.location.reload();
                            }
                        });
                    }
                });
            }

            $(document).ready(function () {
                loadFileInput();
            });
            $(document).on('pjax:complete', function () {
                loadFileInput();
            });
            $("#showForm").click(function () {
                $("#uploadForm").slideToggle(400);
            });
            var winH = $(window).height(); //页面可视区域高度
            var i = 1;
            var max = 4;
            $(window).scroll(function () {
                var pageH = $(document.body).height();
                var scrollT = $(window).scrollTop(); //滚动条top
                var aa = (pageH - winH - scrollT) / winH;
                if (aa < 0.02 && i < max) {
                    i++;
                    $("#pageNum").html(i);
                    var keywords = $('#keywords').val();
                    $.ajax({
                        type: 'GET',
                        url: '/admin/attachment/page?page=' + i + '&keywords=' + keywords,
                        success: function (data) {
                            if (data.code == 1) {
                                console.log(data);
                                var str = '';
                                $.each(data.result, function (index, value) {
                                    str += '<div class="col-lg-2 col-md-3 col-sm-6 col-xs-6 div-thumbnail"\n' +
                                        ' onclick="openDetail(' + value.attachId + ')">\n' +
                                        ' <a href="#" class="thumbnail">\n' +
                                        ' <img src="' + value.attachSmallPath + '" class="img-responsive"\n' +
                                        ' title="' + value.attachName + '">\n' +
                                        ' </a>\n' +
                                        '</div>';
                                });
                                console.log(str);
                                $("#attachment-box").append(str);
                            } else {
                                showMsg(data.msg, "error", 1000);
                            }
                        }
                    })
                }
            });
        </script>
    </div>
    <footer class="main-footer">
        <div class="pull-right hidden-xs"><a target="_blank" href="#">1.0.0</a></div>
        Thanks for using <strong><a data-pjax="true" href="/admin/sens">SENS</a>.</strong>
    </footer>
</div>
<script src="js/jquery.pjax.js"></script>
<script src="js/pace.min.js"></script>
<script src="js/adminlte.min.js"></script>
<script src="js/jquery.toast.min.js"></script>
<script src="js/layer.js"></script>
<script src="js/fileinput.min.js"></script>
<script src="js/froala_editor.pkgd.min.js"></script>
<script src="js/zh_cn.js"></script>
<script src="js/image_manager.min.js"></script>
<script src="js/codemirror-4.inline-attachment.min.js"></script>
<script src="js/jquery.tag-editor.min.js"></script>
<script src="js/jquery.caret.min.js"></script>
<script src="js/jquery.hz2py-min.js"></script>
<script src="js/zh.min.js"></script>
<script src="js/app.js"></script>
<script> Pace.options = {restartOnRequestAfter: false};
$(document).ajaxStart(function () {
    Pace.restart();
});
$(document).pjax('a[data-pjax=true]', '.content-wrapper', {fragment: '.content-wrapper', timeout: 8000});
var heading = "提示"; </script>
</body>
</html>
